<template>
  <div>

    <PageHeader title="页面" />
    <div class="search">
      <el-form :model="searchData">
        <el-row :gutter="20" justify="space-between">
          <el-col :span="foldSearch ? 12 : 6">
            <el-form-item label="名称">
              <el-input v-model="searchData.name" clearable @clear="search" />
            </el-form-item>
          </el-col>
          <el-col v-show="!foldSearch" :span="6">
            <el-form-item label="状态">
              <el-input v-model="searchData.state" clearable @clear="search" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="search">
              <template #icon>
                <el-icon>
                  <svg-icon name="ep:search" />
                </el-icon>
              </template>
              筛选
            </el-button>
            <el-button type="primary" @click="handleAdd">
              <template #icon>
                <el-icon>
                  <svg-icon name="ep:plus" />
                </el-icon>
              </template>
              新增
            </el-button>
            <el-button link @click="foldSearch = !foldSearch">
              <template #icon>
                <el-icon>
                  <svg-icon :name="foldSearch ? 'epcaret-bottom' : 'ep:caret-top'" />
                </el-icon>
              </template>
              {{ foldSearch ? '展开' : '收起' }}
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-table v-loading="tableLoading" :data="tableData" style="width: calc(100% - 40px); margin: 0 20px">
      <el-table-column align="center" prop="code" label="会话编号" min-width="100" />
      <el-table-column align="center" label="操作" width="200">
        <template #default="scope">
          <el-button plain type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button plain type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination class="pagintion" :total="total" @pagination="getList" v-model:page="searchData.page" v-model:limit="searchData.intPageSize" />

    <el-dialog v-model="editDialogVisible" :title="editDialogTitle" width="400px">
      <el-form v-loading="confirmLoading" ref="editFormRef" label-position="right" label-width="100px" :model="editData" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-form-item label="账号" prop="userno">
              <el-input v-model="editData.userno" :disabled="editDialogTitle !== '新增'"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">关闭</el-button>
          <el-button :loading="confirmLoading" type="primary" @click="confirmEdit(editFormRef)"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">

onMounted(() => {
  getList()
})

const foldSearch = ref(true)
const tableData = ref([])
const total = ref(0)
const tableLoading = ref(false)
const searchData = ref({
  name: '',
  state: ''
  // status: ''
})
const getList = () => {
}
const search = () => {
  searchData.value.page = 1
  getList()
}

const editData = ref<>({})
const rules = ref<FormRules>({
  userno: [{ required: true, message: '请输入账号', trigger: 'blur',},],
  status: [{required: true,message: '请设定状态',trigger: 'change',},],
})
const editDialogVisible = ref(false)
const editDialogTitle = ref('')
const editFormRef = ref<FormInstance>()
const handleAdd = () => {
  editDialogTitle.value = '新增'
  editData.value = {}
  editFormRef.value?.resetFields()
  editDialogVisible.value = true
  confirmLoading.value = false
}
const handleEdit = (row: any) => {
  Object.assign(editData.value, row)
  editDialogTitle.value = '编辑'
  editDialogVisible.value = true
  confirmLoading.value = false
}
const confirmLoading = ref(false)
const confirmEdit = async (formEl: FormInstance | undefined) => {
  // console.log(editData.value)
  confirmLoading.value = true
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log('submit!')
      // console.log(editData.value);
      if (editDialogTitle.value === '新增') {
        addAccountUser(editData.value).then(re => {
          ElMessage.success('已添加')
          getList()
          editDialogVisible.value = false
        }).finally(() => {
          confirmLoading.value = true
        })
      } else if (editDialogTitle.value === '编辑') {
        updateAccountUser(editData.value).then(re => {
          ElMessage.success('已修改')
          getList()
          editDialogVisible.value = false
        }).finally(() => {
          confirmLoading.value = false
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
// const nowPlace = ref<Array<CusPlaceView>>([])
// const handleChangeCustom = (val: number) => {
//   var custom = systemStore.customs.find(e => e.customs_id === val)
//   nowPlace.value = custom?.places as Array<CusPlaceView>
// }

const handleDelete = (row: any) => {
  ElMessageBox.confirm('确定删除该角色？','提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    console.log(row.userno);

    deleteAccountUser(row.userno).then(re => {
      ElMessage.success('已删除')
      getList()
    })
  }).catch(() => {
    ElMessage.info('已取消')
  })
}
</script>
<style scoped lang="scss">
.search {
  background-color: #fff;
  margin: 0 20px 10px;
  padding: 8px 100px;
}
.pagintion {
  margin: 10px 20px;
}
</style>

